/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode1.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import icon_banner1_mode1 from "@/assets/icon_banner1_mode1.png"
import icon_banner1_mode2 from "@/assets/icon_banner1_mode2.png"
import icon_banner1_mode3 from "@/assets/icon_banner1_mode3.png"
import icon_play_store from "@/assets/icon_play_store@2x.png"
import icon_logo1 from "@/assets/icon_logo1@2x.png"
import icon_safety from "@/assets/icon_safety@2x.png"
import icon_star from "@/assets/icon_star@2x.png"
import icon_storage from '@/assets/icon_storage@2x.png'
import icon_download_count from '@/assets/icon_download_count@2x.png'
import icon_step1 from '@/assets/icon_step1@2x.png'
import icon_step2 from '@/assets/icon_step2@2x.png'
import icon_step3 from '@/assets/icon_step3@2x.png'
import icon_step_arrow from '@/assets/icon_step_arrow@2x.png'

import { PageIndicator, Swiper } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
// import { LangEnUgx } from "@/utils/langEnUgx";
import { LangFrXaf } from "@/utils/langFrXaf";
import { LangStore } from "@/utils/langStore";

/**
 * 落地页-1
 */
export default function LaunchMode1() {

    // 获取路由历史 history 对象
    const history = useHistory()

    //获取 Redux 分发器
    const dispatch = useDispatch()

    // 文案翻译
    const [curLang, setCurLang] = useState(LangFrXaf);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    // banner
    const banners = [icon_banner1_mode1, icon_banner1_mode2, icon_banner1_mode3]

    const items = banners.map((banner, index) => (
        <Swiper.Item key={index}>
            <div className="launchmode1SwiperItemContent">
                <img className="launchmode1SwiperItemImage" src={banner} alt="" />
                {
                    (index === 0) && <div className="launchmode1BannerTipsContent">
                        <div className="launchmode1Banner1Tips1">{curLang.banner1Tip1}</div>
                        <div className="launchmode1Banner1Tips2">{curLang.banner1Tip2}</div>
                    </div>
                }

                {
                    (index === 1) && <div className="launchmode1BannerTipsContent">
                        <div className="launchmode1Banner2Tips1">{curLang.banner2Tip1}</div>
                        <div className="launchmode1Banner2Tips2">{curLang.banner2Tip2}</div>
                    </div>
                }

                {
                    (index === 2) && <div className="launchmode1BannerTipsContent">
                        <div className="launchmode1Banner3Tips1">{curLang.banner3Tip1}</div>
                        <div className="launchmode1Banner3Tips2">{curLang.banner3Tip2}</div>
                    </div>
                }
            </div>
        </Swiper.Item>
    ))

    //点击下载
    const onHandleInstallClick = () => {
        //Initializing Smart Script arguments
        // let oneLinkURL = "https://nanacredit.onelink.me/QIup";
        // let mediaSource = { keys: ["incoming_fb"], defaultValue: "Facebook_H5_Install" };
        // let campaign = { keys: ["incoming_campaign"], defaultValue: "any_campaign_name" };
        // let adSet = { keys: ["incoming_adset"], defaultValue: "any_adset_name" };
        // let ad = { keys: ["incoming_ad"], defaultValue: "any_ad_name" };
        // let channel = { keys: ["incoming_channel"], defaultValue: "any_video" };
        // let googleClickIdKey = "af_sub2";
        // let afSub1 = { keys: ["fbclid"] };
        // let custom_ss_ui = { paramKey: "af_ss_ui", defaultValue: "true" };

        // //Call the function after embedding the code through a global parameter on the window object called window.AF_SMART_SCRIPT.
        // //Onelink URL is generated.
        // let result = window.AF_SMART_SCRIPT.generateOneLinkURL({
        //     oneLinkURL: oneLinkURL,
        //     afParameters: {
        //         mediaSource: mediaSource,
        //         campaign: campaign,
        //         adSet: adSet,
        //         ad: ad,
        //         channel: channel,
        //         googleClickIdKey: googleClickIdKey,
        //         afSub1: afSub1,
        //         afCustom: [
        //             custom_ss_ui
        //         ]
        //     }
        // });

        // //非空才能跳转
        // if (!result) {
        //     return
        // }
        // //真实url
        // const resultUrl = result.clickURL
        // if (!resultUrl) {
        //     return
        // }
        // // window.location.href = result.clickURL;
        // window.open(result.clickURL, "_blank")

        //打点
        doHitEvent("INSTALL_CLICK")


        let apkUrl = "https://www.allproductugx.online/apkh5kny/nanacredit_smsgooduser.apk"
        window.open(apkUrl, "_blank")

        // const pUrl = ""
        // window.open(pUrl, "_blank")
    }

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //启动时请求用户状态
    useEffect(() => {
        var language = "en";
        let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        console.log("timeZone:" + timeZone);
        console.log("language:" + language);

        //加纳 单包
        setCurLang(LangFrXaf);

        // if (timeZone === "Africa/Abidjan") {
        //     //科特
        //     setCurLang(LangFrFcfa)

        // } else if (timeZone === "Africa/Kampala") {
        //     //乌干达
        //     setCurLang(LangEnUgx)

        // } else if (timeZone === "Africa/Accra") {
        //     //加纳
        //     setCurLang(LangEnGhs)

        // } else if (timeZone === "Africa/Douala") {
        //     //喀唛隆
        //     setCurLang(LangFrXaf)

        // } else if (timeZone === "Africa/Nairobi") {
        //     //肯尼亚
        //     setCurLang(LangEnKes)

        // } else if (timeZone === "Africa/Lagos") {
        //     //尼日
        //     setCurLang(LangEnNGN)

        // } else {
        //     //尼日
        //     setCurLang(LangEnNGN)
        // }

        //更新显示

        //打点
        //doHitEvent("launchmode1_START")

        // return () => {
        //打点
        // doHitEvent("launchmode1_END")
        // }
    }, [])

    return (
        <div className="launchmode1Root">
            {/* <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar> */}

            <div className="launchmode1RowGlobalPadding launchmode1MarginTop14Px">
                {/* 顶部banner */}
                <div className="launchmode1SwiperContent">
                    <Swiper
                        style={{
                            '--border-radius': '8px',
                            '--track-padding': ' 0px 0px 32px 0px'
                        }}
                        indicator={(total, current) => (
                            <div className="launchmode1SwiperIndicator">
                                <PageIndicator
                                    total={total}
                                    current={current}
                                    style={{
                                        '--dot-color': '#EEeEeE',
                                        '--active-dot-color': '#012787',
                                        '--dot-size': '8px',
                                        '--active-dot-size': '16px',
                                        '--dot-border-radius': '50%',
                                        '--active-dot-border-radius': '8px',
                                        '--dot-spacing': '10px',
                                    }}
                                />
                            </div>
                        )}
                        defaultIndex={0}>
                        {items}
                    </Swiper>
                </div>
            </div>

            {/* app 图标 */}
            <div className="launchmode1RowGlobalPadding launchmode1MarginTop36Px">
                <img className="launchmode1AppLogo" src={icon_logo1} alt="" />

                <div className="launchmode1ColumnFullRight launchmode1PaddingLeft16Px">
                    <span className="launchmode1AppName">{curLang.appName}</span>
                    <span className="launchmode1AppOwner launchmode1MarginTop3Px">{curLang.appDev}</span>
                    <div className="launchmode1RowFullRight launchmode1MarginTop3Px">
                        <img className="launchmode1ImageSafety" src={icon_safety} alt="" />
                        <div className="launchmode1AppSafety">{curLang.appSafety}</div>
                    </div>
                </div>
            </div>

            {/* 评价、下载量 */}
            <div className="launchmode1RowGlobalPadding launchmode1MarginTop46Px launchmode1FlexCenter">
                <div className="launchmode1RowStoreItem">
                    <img className="launchmode1StoreIconStar" src={icon_star} alt="" />
                    <div className="launchmode1StoreText">{curAppStore.appReviewStar}</div>
                </div>

                <div className="launchmode1Space22Px"></div>

                <div className="launchmode1RowStoreItem">
                    <div className="launchmode1StoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                </div>

                <div className="launchmode1Space22Px"></div>

                <div className="launchmode1RowStoreItem">
                    <img className="launchmode1StoreIcon" src={icon_storage} alt="" />
                    <div className="launchmode1StoreText">{curAppStore.appSize}</div>
                </div>

                <div className="launchmode1Space22Px"></div>

                <div className="launchmode1RowStoreItem">
                    <img className="launchmode1StoreIcon" src={icon_download_count} alt="" />
                    <div className="launchmode1StoreText">{curAppStore.appDownloadCount}</div>
                </div>
            </div>

            {/* 跳转应用市场 */}
            <div className="launchmode1RowGlobalPadding launchmode1FlexCenter launchmode1MarginTop20Px launchmode1Padding26Px">
                <div className="launchmode1BtnInstall" onClick={onHandleInstallClick}>
                    <img className="launchmode1InstallIcon" src={icon_play_store} alt="" />
                    <div className="launchmode1Space15Px"></div>
                    <div className="launchmode1InstallText">{curLang.toInstall}</div>
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode1RowGlobalPadding launchmode1FlexCenter launchmode1MarginTop25Px">
                <img className="launchmode1StepIcon" src={icon_step1} alt="" />
                <div className="launchmode1Space11Px"></div>
                <div className="launchmode1StepText">{curLang.applyStep1}</div>
            </div>

            <img className="launchmode1StepArrowIcon launchmode1MarginTop14Px" src={icon_step_arrow} alt="" />

            {/* 申请步骤 */}
            <div className="launchmode1RowGlobalPadding launchmode1FlexCenter launchmode1MarginTop10Px">
                <img className="launchmode1StepIcon" src={icon_step2} alt="" />
                <div className="launchmode1Space11Px"></div>
                <div className="launchmode1StepText">{curLang.applyStep2}</div>
            </div>

            <img className="launchmode1StepArrowIcon launchmode1MarginTop14Px" src={icon_step_arrow} alt="" />

            {/* 申请步骤 */}
            <div className="launchmode1RowGlobalPadding launchmode1FlexCenter launchmode1MarginTop10Px">
                <img className="launchmode1StepIcon" src={icon_step3} alt="" />
                <div className="launchmode1Space11Px"></div>
                <div className="launchmode1StepText">{curLang.applyStep3}</div>
            </div>

            <div className="launchmode1AppLogo"></div>
        </div>
    )
}